<html>
  <head>
    <title>hello!</title>
    <!-- <link rel="stylesheet" href="index.css" /> -->
  </head>
  <body style="color: darkorchid">
    <div class="main">
      <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input
          type="button"
          name="bt"
          value="添加"
          onclick="handleClick(event)"/>
        <input type="button" id="button2" value="button" onclick="deleteall(event)"/>
      </div>
      <div id="todogroup">
      </div>
  </body>
  <script lang="javascript">

    var intCnt=0;

    function init() {
      console.log('xxxx');
      console.log('xxxxxxx');
    }
    function handleClick(e) {
      console.log('handleClick');
      console.log(e);
      var temp=getValue();
      document.getElementById("todogroup").innerHTML+="<div class='item' id='todo"
          +intCnt+"'><input type='checkbox' name='todocheck' id='ck"+intCnt+"'><div class='item-value'>"
          +temp+"</div><button class='item-del' type='button' onclick='deletByIndex("
          +intCnt+")'>删除</button></div>";
      document.getElementById("inputtext").value= "";
      intCnt++;
    }
    
    function getValue(){
        var temp=document.getElementById("inputtext");
        console.log(temp.value);
        return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }
    function keyup(e){
        if(e.keyCode==13){
            handleClick();
        }
    }
    init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .main {
      background-color: green;
      /* width: 200px; */
      /* height: 200px; */
      padding:16px;
      border:4px solid gold;
      border-radius: 12px;
    }
    .row {
      display: flex;
    }
    .item {
      display: flex;
      align-items: center;
      margin: 6px;
      padding:3px;
      background-color:gray;
    }
    .item:hover{
      background-color: blue;
    }
    .item-value {
      flex-grow:1;
      color:rgb(144, 67, 67);
    }
    .item-del{
      color:white;
      background-color: purple;
      border:0px;
      opacity: 0;
      /* clear:both;
      float:right; */
      /* margin:200px; */
    }
    .item:hover .item-del {
      opacity: 1;
    }
    .input{
      padding:8px;
      outline:none;
       /* opacity: 1;  */
    }
    .input:focus{
      box-shadow:0px 0px 10px rgb(0, 255, 68);
      border:2px solid rgb(0, 255, 102);
    }
  </style>
</html>
